import Viewer from '@/viewer/index';
import { getGeoJsonByCode } from '@/utils/map-geojson/get-geojson';
import * as Cesium from 'cesium';

const cesiumViewer = new Viewer('cesiumContainer'); //初始化cesium

cesiumViewer.layer.initLayer(); //初始化底图

const jsonData = getGeoJsonByCode('370000'); //获取JSON数据
//添加geojson图层
let geojsonLayer = cesiumViewer.value.layer.initGeoJsonLayer({
    geojson: jsonData,
    style: {
        fill: Cesium.Color.fromCssColorString('rgba(0, 122, 204, 0.1)'),
        stroke: Cesium.Color.fromCssColorString('rgba(18, 188, 92, 0.8)'),
        strokeWidth: 0
    }
});
cesiumViewer.value.viewer.zoomTo(geojsonLayer); //跳转到geojson图层

let pointLayer = [];
//加点
const addPoint = () => {
    let entity = cesiumViewer.value.entities.addPoint({
        coordinates: [117.93266264415541, 36.07115382604098],
        style: {},
        info: {
            name: 'pointInfo',
            info: { name: '测试' }
        }
    });
    pointLayer.push(entity);
};
//清除点
const clearPoint = () => {
    pointLayer.forEach((entity) => {
        cesiumViewer.value.viewer.entities.remove(entity);
    });
};

let billboardLayer = [];
//加图标点
const addBillboard = () => {
    let entity = cesiumViewer.value.entities.addBillboard({
        coordinates: [117.93266264415541, 36.07115382604098],
        style: {},
        info: {
            name: 'pointInfo',
            info: { name: '测试' }
        }
    });
    billboardLayer.push(entity);
};
//清除图标点
const clearBillboard = () => {
    billboardLayer.forEach((entity) => {
        cesiumViewer.value.viewer.entities.remove(entity);
    });
};

let labelLayer = [];
//加文本
const addLabel = () => {
    let entity = cesiumViewer.value.entities.addLabel({
        coordinates: [117.93266264415541, 36.07115382604098],
        style: {},
        info: {
            name: 'pointInfo',
            info: { name: '测试' }
        }
    });
    labelLayer.push(entity);
};
//清除文本
const clearLabel = () => {
    labelLayer.forEach((entity) => {
        cesiumViewer.value.viewer.entities.remove(entity);
    });
};

let polylineLayer = [];
//加折线
const addPolyline = () => {
    let entity = cesiumViewer.value.entities.addPolyline({
        coordinates: [117.93266264415541, 36.07115382604098],
        style: {},
        info: {
            name: 'pointInfo',
            info: { name: '测试' }
        }
    });
    polylineLayer.push(entity);
};
//清除折线
const clearPolyline = () => {
    polylineLayer.forEach((entity) => {
        cesiumViewer.value.viewer.entities.remove(entity);
    });
};

let polygonLayer = [];
//加面
const addPolygon = () => {
    let entity = cesiumViewer.value.entities.addPolygon({
        coordinates: [117.93266264415541, 36.07115382604098],
        style: {},
        info: {
            name: 'pointInfo',
            info: { name: '测试' }
        }
    });
    polygonLayer.push(entity);
};
//清除面
const clearPolygon = () => {
    polygonLayer.forEach((entity) => {
        cesiumViewer.value.viewer.entities.remove(entity);
    });
};

let rectangleLayer = [];
//加矩形
const addRectangle = () => {
    let entity = cesiumViewer.value.entities.addRectangle({
        coordinates: [117.93266264415541, 36.07115382604098],
        style: {},
        info: {
            name: 'pointInfo',
            info: { name: '测试' }
        }
    });
    rectangleLayer.push(entity);
};
//清除矩形
const clearRectangle = () => {
    rectangleLayer.forEach((entity) => {
        cesiumViewer.value.viewer.entities.remove(entity);
    });
};

let modelLayer = [];
//加3D模型
const addModel = () => {
    let entity = cesiumViewer.value.entities.addModel({
        coordinates: [117.93266264415541, 36.07115382604098],
        style: {},
        info: {
            name: 'pointInfo',
            info: { name: '测试' }
        }
    });
    modelLayer.push(entity);
};
//清除3D模型
const clearModel = () => {
    modelLayer.forEach((entity) => {
        cesiumViewer.value.viewer.entities.remove(entity);
    });
};

let wallLayer = [];
//加三维墙
const addWall = () => {
    let entity = cesiumViewer.value.entities.addWall({
        coordinates: [117.93266264415541, 36.07115382604098],
        style: {},
        info: {
            name: 'pointInfo',
            info: { name: '测试' }
        }
    });
    wallLayer.push(entity);
};
//清除三维墙
const clearWall = () => {
    wallLayer.forEach((entity) => {
        cesiumViewer.value.viewer.entities.remove(entity);
    });
};

let polylineVolumeLayer = [];
//加三维管道
const addPolylineVolume = () => {
    let entity = cesiumViewer.value.entities.addPolylineVolume({
        coordinates: [117.93266264415541, 36.07115382604098],
        style: {
            radius: 30,
            cornerType: 'ROUNDED'
        },
        info: {
            name: 'pointInfo',
            info: { name: '测试' }
        }
    });
    polylineVolumeLayer.push(entity);
};
//清除三维管道
const clearPolylineVolume = () => {
    polylineVolumeLayer.forEach((entity) => {
        cesiumViewer.value.viewer.entities.remove(entity);
    });
};

// measure('area');
// measure('distance');
//测量
const measure = (type) => {
    cesiumViewer.value.measure.measure(type);
};

//清除测量
const clearMeasure = () => {
    cesiumViewer.value.measure.clearEdit();
};

// changeBaseMap('vector')
// changeBaseMap('image')
// changeBaseMap('landform')
//切换底图
const changeBaseMap = (type) => {
    cesiumViewer.value.layer.changeBaseMap(type);
};

// startDrawing('Point');
// startDrawing('LineString');
// startDrawing('Circle');
// startDrawing('Rectangle');
// startDrawing('Polygon');
const startDrawing = (type) => {
    cesiumViewer.value.draw.startDrawing(type, false, (coordinates) => {
        console.log('绘制的坐标：', coordinates);
    });
};

//加地图弹窗
let overlay;
//两个参数，第一个为绑定的dom，第二个为点击事件返回的一个feature，拿到feature处理相应逻辑
const addOverlay = () => {
    overlay = cesiumViewer.value.overlay.setOverlay(document.getElementById('popupBox'), (feature) => {
        //如果feature有相应属性
        if (feature.pointInfo) {
            overlay.setPosition(feature.values_.geometry.flatCoordinates); //设置弹窗位置
            //......弹窗处理逻辑
        }
    });
};

//移动地图到某个点
const panTo = () => {
    cesiumViewer.value.panTo({
        coordinates: [116, 35], //中心坐标
        duration: 1000, //移动时间
        zoom: 10 //缩放级别
    });
};

//移动地图到某个图层
const fitLayer = () => {
    if (cesiumViewer.value.layer.getLayerByName('点图层')) {
        cesiumViewer.value.layer.fitLayer({
            layer: cesiumViewer.value.layer.getLayerByName('点图层'), //图层
            duration: 1000, //移动时间
            paddingList: [100, 100, 100, 100] //添加内边距
        });
    }
};

//移动地图到某个矩形范围
const fitExtentPadding = () => {
    cesiumViewer.value.layer.fitExtentPadding({
        extent: [114.819254, 34.377352, 122.715802, 38.401933], //矩形范围
        duration: 1000, //移动时间
        paddingList: [0, 0, 0, 0] //添加内边距
    });
};

//通过图层的layerName属性获取图层
const getLayerByName = () => {
    return cesiumViewer.value.layer.getLayerByName('测试图层');
};

//添加图片图层
const setImageLayer = () => {
    cesiumViewer.value.layer.setImageLayer(
        'https://120.220.101.53:8088/minio/sddzqx/geologicalFactors/07915bca6ed0414e81f8fc6b57c6c3fd.png', //图片地址
        [113, 32, 124, 39], //范围
        0.8 //透明度
    );
};

//添加图片图层
const removeImageLayer = () => {
    cesiumViewer.value.layer.removeImageLayer();
};
